<script setup lang="ts">
import { computed, ref, watch } from "vue";

// 定义水果对象的类型
interface Fruit {
  id: number;
  icon: string;
  isChecked: boolean;
  num: number;
  price: number;
}

// 默认水果列表
const defruitList = ref<Fruit[]>([
  {
    id: 1,
    icon: "https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png",
    isChecked: true,
    num: 2,
    price: 6,
  },
  {
    id: 2,
    icon: "https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png",
    isChecked: false,
    num: 7,
    price: 20,
  },
  {
    id: 3,
    icon: "https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png",
    isChecked: false,
    num: 3,
    price: 40,
  },
  {
    id: 4,
    icon: "https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png",
    isChecked: false,
    num: 10,
    price: 3,
  },
  {
    id: 5,
    icon: "https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png",
    isChecked: false,
    num: 20,
    price: 34,
  },
]);

function getFruitList() {
  if (localStorage.getItem("list") === null) {
    // 获取不到，使用默认列表
    return defruitList.value;
  } else {
    // 本地存储中存在列表数据，则使用本地存储中的数据
    return JSON.parse(localStorage.getItem("list") || "[]");
  }
}

const fruitList = ref<Fruit[]>(getFruitList());

// 如果本地存储中不存在列表数据，则使用默认的水果列表
// 否则，从本地存储中获取列表数据
// const fruitList =
//   localStorage.getItem("list") === null
//     ? ref<Fruit[]>(defruitList.value)
//     : ref<Fruit[]>(JSON.parse(localStorage.getItem("list") || "[]"));

// 监视fruitList的变化，当列表数据发生变化时，自动更新本地存储中的数据
watch(
  fruitList,
  () => {
    localStorage.setItem("list", JSON.stringify(fruitList.value));
  },
  { deep: true, immediate: true }
);

// 删除水果
const delFruit = (id: number) => {
  fruitList.value = fruitList.value.filter((item) => item.id !== id);
};
// 减少水果
const reduceNum = (id: number) => {
  // findIndex方法
  // const activeItem = fruitList.value.findIndex(item => item.id === id)
  // fruitList.value[activeItem].num--

  const activeItem = fruitList.value.find((item) => item.id === id);
  // if(activeItem){
  //   activeItem.num--
  // }
  activeItem && activeItem.num--;
};
// 增加水果
const addNum = (id: number) => {
  const activeItem = fruitList.value.find((item) => item.id === id);
  activeItem && activeItem.num++;
};

// 通过计算属性，计算全选状态
const isAllSelected = computed({
  // 获取当前全选状态
  get() {
    // 计算结果记得 return 返回
    // every方法 判断数组中的元素是否都满足条件，如果满足返回true，否则返回false
    return fruitList.value.every((item) => item.isChecked);
  },
  // 设置全选状态，value就是get()方法返回的值
  set(value) {
    console.log("全选按钮的值修改了", value);
    fruitList.value.forEach((element) => {
      element.isChecked = value;
    });
  },
});

// 计算选中的水果列表
const selectedFruitList = computed(() => {
  return fruitList.value.filter((item) => item.isChecked);
});

// 计算总个数
const totralNum = computed(() => {
  return selectedFruitList.value.reduce((acc, item) => acc + item.num, 0);
});
// 计算总价
const totalPrice = computed(() => {
  return selectedFruitList.value.reduce(
    (acc, item) => acc + item.price * item.num,
    0
  );
});
</script>

<template>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box">
      <img
        src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/sg_top.png"
        alt=""
      />
    </div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 购物车主体 -->
    <div v-if="fruitList.length > 0" class="main">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <div v-for="item in fruitList" :key="item.id" class="tr active">
            <div class="td">
              <input type="checkbox" v-model="item.isChecked" />
            </div>
            <div class="td">
              <img :src="item.icon" alt="水果" />
            </div>
            <div class="td">{{ item.price }}</div>
            <!-- 计数器 -->
            <div class="td">
              <div class="my-input-number">
                <!-- disabled禁用按钮 -->
                <button
                  :disabled="item.num <= 1"
                  class="decrease"
                  @click="reduceNum(item.id)"
                >
                  -
                </button>
                <span class="my-input__inner">{{ item.num }}</span>
                <button class="increase" @click="addNum(item.id)">+</button>
              </div>
            </div>
            <div class="td">{{ item.price * item.num }}</div>
            <div class="td">
              <button @click="delFruit(item.id)">删除</button>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <input type="checkbox" v-model="isAllSelected" />
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box"
            >总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{
              totalPrice
            }}</span></span
          >
          <!-- 结算按钮 -->
          <button class="pay">结算( {{ totralNum }} )</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div v-else class="empty">🛒空空如也</div>
  </div>
</template>

<style scoped>
@import "./style/inputnumber.css";
@import "./style/index.css";
</style>
